<template>
	<view :class="currentTheme">
		<a-nabbar name="完善信息" />
		<view class="u-padding-32">
			<item-box paddinglr="40">
				<label-box :label="option.userType==='store'?'门店名' : '发行名'" labelWidth="130">
					<u-input v-model="form.nickname" 
					:clearable="false" border  :placeholder="`请输入${option.userType==='store'?'门店名' : '发行名'}`" 
						:borderColor="currentThemeObj.inputBorderColor" 
						 :placeholder-style="`color:${currentThemeObj.placeholderColor}`"/>
				</label-box>
				<label-box label="所在城市" labelWidth="130">
					<select-item v-model="form.address"  mode="popSelectCity"  @getSelect="getSelectCity"></select-item>
				</label-box>
				<label-box label="订单号" labelWidth="130">
					<u-input v-model="form.ticket" 
					:clearable="false" border  placeholder="请输入订单号" 
						:borderColor="currentThemeObj.inputBorderColor" 
						 :placeholder-style="`color:${currentThemeObj.placeholderColor}`"/>
				</label-box>
				<label-box label="性别设置" labelWidth="130">
					<view>
						<select-item v-model="form.gender" :list='sexList' :defaultValue="[sexValueIndex]"></select-item>
						<view class="u-font-22 u-margin-top-20 content-desc-item">该性别用于测本对应角色</view>
					</view>
				</label-box>
			</item-box>
		</view>
		<fixed-team btnText="下一步" @btnClick="validateForm" :loading="loading" ></fixed-team>
		<model v-model="show" :show-title="false" show-cancel-button   cancel-color="#333333" :confirm-color="currentThemeObj.primary" content="是否确定信息无误？"  @confirm="setUserInfo"/>
	</view>
</template>

<script>
	import model from '@/components/u-modal/u-modal.vue'
	import {updateUserInfo} from '@/api/user.js'
	import data from '@/data/index.js'
	import {mapGetters} from 'vuex'
	import selectCityMixins from '@/mixins/selectMixins.js'
	export default {
		components: {
			model
		},
		mixins:[selectCityMixins],
		data() {
			return {
				form:{
					address:'',
					gender:'',
					nickname:'',
					ticket:""
				},
				show:false,
				sexList:data.sexList,
				option:{},
				loading:false
			};
		},
		computed: {
			...mapGetters(['loginForm']),
			sexValueIndex() {
				const index = this.sexList.findIndex(val=>val.label===this.form.gender);
				return index>0 ? index : 0 
			},
			isStore(){
				return this.option.userType==='store'
			}
		},
		onLoad(option) {
			this.option = option;
		},
		methods: {
			validateForm(){
				const {nickname,address,gender} = this.form;
				if(!nickname){
					this.$u.toast('名称不能为空')
					return false;
				}
				if(!address){
					this.$u.toast('地址不能为空')
					return false;
				}
				if(this.isStore&&!gender){
					this.$u.toast('性别不能为空')
					return false;
				}
				this.show = true;
			},
			setUserInfo(){
				this.form.uid = this.loginForm.uid;
				this.loading = true;
				updateUserInfo(this.form).then(res=>{
					const url = this.isStore ? '/pagesB/like/like' : '/pages/index/index';
					this.loading = false;
					this.$u.route({
						type:"reLaunch",
						url,
						params:{
							isLogin:1 //是否为登录到偏好设置界面
						}
					})
					this.$store.dispatch("setUserStep",2) //更新本地步骤到完善资料
				}).catch((e)=>{
					console.log(e)
					this.loading = false;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.sava-btn{
	bottom: 200rpx;
	left: 225rpx;
	right: 225rpx;
}
.field-box{
	padding:132rpx  32rpx 0;
}
.sex-setting{
	line-height: 74rpx;
}
</style>
